<template>
	<!--供应商and客户销售and采购汇总-->
	<view class="wrapper" :style="{height:wrapperHeight +'px'}">
		<!--<view class="title-padding"></view>-->
		<view class="headerGd">
			<view class="header">
				<button class="back" @tap="back()"></button>
				{{OrderTitle}}
				<button class="filter" @tap="filter()"></button>
			</view>
		</view>
		<view class="container" :style="{height: containerHeight + 'px'}">
			<view class="curstom">
				<view class="changeList" @tap="changeListAl">

				</view>
				<view class="curstomName">
					{{MemberName}}
				</view>
				<view class="filterTime">
					<text>{{Phone}}</text>
					<text>{{MemberCode}}</text>
				</view>
			</view>
			<view class="orderList" :style="{height: orderListHeight + 'px' }" v-show="!isList">
				<view class="orderNav" :style="{width:tdAllWidth+'px'}" @tap="changeWidth()">
					<text :style="{width:tdWidth[index]+'px'}" v-for="(item,index) in tdHeaderList" :key="index">
						{{item.name}}
					</text><!-- <text :style="{width:tdWidth[1]+'px'}">
						客户编码
					</text><text :style="{width:tdWidth[2]+'px'}">
						客户
					</text><text :style="{width:tdWidth[3]+'px'}">
						{{!isSupperPurb?"出库数量":"进货数量"}}
					</text><text :style="{width:tdWidth[4]+'px'}">
						{{!isSupperPurb?"出库金额":"进货金额"}}
					</text><text :style="{width:tdWidth[5]+'px'}">
						退货数量
					</text><text :style="{width:tdWidth[6]+'px'}">
						退货金额
					</text><text :style="{width:tdWidth[7]+'px'}">
						差异数量
					</text><text :style="{width:tdWidth[8]+'px'}">
						差异金额
					</text><text :style="{width:tdWidth[9]+'px'}">
						{{!isSupperPurb?"销售数(未审)":"进货数(未审)"}}
					</text><text :style="{width:tdWidth[10]+'px'}">
						退货数(未审)
					</text> -->
				</view>
				<view class="orderLi" :style="{height:orderLiHeight +'px',width:tdAllWidth+'px'}">
					<view class="orderItem" v-for="(item,index) in orderList" :key="index">
						<text :style="{width:tdWidth[0]+'px'}">
							{{index+1}}
						</text>
						<text :style="{width:tdWidth[1]+'px'}">
							<!-- 编号 -->
							{{item.MemberCode}}
						</text>
						<text :style="{width:tdWidth[2]+'px'}">
						<!-- 	姓名 -->
							{{item.MemberName}}
						</text>
						<text :style="{width:tdWidth[3]+'px'}">
						<!-- 	电话 -->
							{{item.Photo}}
						</text>
						<text :style="{width:tdWidth[4]+'px'}">
							<!-- 性别 -->
							{{item.VipClass?'男':'女'}}
						</text>
						<text :style="{width:tdWidth[5]+'px'}">
							<!-- 积分 -->
							{{item.integral}}
						</text>
						<text :style="{width:tdWidth[6]+'px'}">
							<!-- 余额 -->
							{{item.Total}}
						</text>
					</view>
					
				</view>
				
			</view>
			<view class="flOptions">
				<button @tap="openModel(1)">新增</button>
			</view>
			<view class="orderLookAllList" :style="{height: orderListHeight + 'px'}" v-show="isList">
				<view class="orderLookItem" v-for="(item,index) in orderList" :style="{ display:(nowRote === index) ? 'table':'block'}"
				 :key="index" >
				  <view  @tap="openModel(0,index)">
					  <text>{{index+1}}</text>
					  <text>编号:{{item.MemberCode}}</text>
					  <text>姓名:{{item.MemberName}}</text>
					  <text>电话:{{item.Photo}}</text>
					  <text>性别:{{item.VipClass?'男':'女'}}</text>
					  <text>积分:{{item.integral}}</text>
					  <text>余额:{{item.Total}}</text>
				  </view>
					<button class="lookMoreInfo" :style="{ transform :(nowRote == index)  ? 'rotate(180deg)':'rotate( 0deg)'}"  @tap="lookMore(index)"></button>
				</view>
			</view>
		</view>
		<view class="changetdWidth" v-show="showChange">
			<view class="changetdWidthHeader">修改列长度</view>
			<view  class="changetdWidthContain">
			<view v-for="(item,index) in tdHeaderList" :key="index">
				<view class="changeItem">
					<text class="liName">{{item.name}}列</text>
					<input v-model="tdWidth[index]" />
				</view>
			</view>
			</view>
			<view class="sureBt">
				<button  @tap="hideChaneg()">确定</button>
			</view>
		</view>
	</view>
	
</template>
<script>
	
	import * as Api from '@/syApis/syDa/syDa.js'
	export default {
		created() {
			var $this = this;
			uni.getSystemInfo({
				success(res) {
					$this.wrapperHeight = res.windowHeight;
					$this.orderListHeight = res.windowHeight - 100 - 54;
					$this.containerHeight = res.windowHeight - 50 - 25;
					$this.orderLiHeight = res.windowHeight - 100 - 94 - 25;
				}
			});
			let date = new Date();
			this.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
			this.endTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
			this.getCgOrder();
		},
		
		computed:{
			 tdAllWidth(){
				 var tdAllWidth = 0;
				 this.tdWidth.forEach(item=>{
					   tdAllWidth+=parseFloat(item);
				 });
				 tdAllWidth+=this.tdWidth.length-1;
				 return tdAllWidth;
			 }
		},
		onLoad(options) {
			
		},
		onShow(){
			this.$eventHub.$off('fire');
			this.$eventHub.$off('fires');
		},
		methods: {
			//修改宽度
			changeWidth(){
				 this.showChange = true;
			},
			hideChaneg(){
				 this.showChange = false;
			},
			//返回上一页
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//跳转到筛选条件页
			filter() {
				this.AddListen();
				uni.navigateTo({
					url: './info-vipMessageF'
				})
			},
			//新增修改监听
			AddListens(){
				var _this = this;
				this.$eventHub.$on('fires', function(data) {
					_this.getCgOrder();
					console.log("调用了");
					_this.$eventHub.$off('fires');
				});
			},
			//过滤监听
			AddListen(){
				var _this = this;
				this.$eventHub.$on('fire', function(data) {
					_this.MemberCode = data.MemberCode,
					_this.MemberName = data.MemberName == "" ? "全部客户" : data.MemberName,
					_this.Photo = data.Photo,
					_this.getCgOrder(data);
					console.log("打印");
					_this.$eventHub.$off('fire');
				});
			},
			//获取汇总数据
			getCgOrder: function(filter) {
				let data = {};
				if (filter == undefined) {
					data = {
						SelectAll:1
					}
				} else {
					data = filter;
				}
				var _this = this;
					Api.Get_MemberMessage(data, function(res) {
						if (res.state) {
							if (res.data.ErrorMsg == "获取登录信息失败") {

							} else if (res.data.ErrorMsg != "") {
								Api.showTip(res.data.ErrorMsg);
							} else {
								_this.orderList = _this.setGetTwoFloat(res.data.ResultMsg);
							}
						} else {
							Api.showTip("服务器开小差了");
						}
					});
			},
			//将数额保留两位小数
			setGetTwoFloat(arr) {
				arr.forEach((item, index) => {
					arr[index].real_qty = Api.setTwoFloat(item.real_qty);
					arr[index].real_Amount = Api.setTwoFloat(item.real_Amount);
					arr[index].return_qty = Api.setTwoFloat(item.return_qty);
					arr[index].real_qty2 = Api.setTwoFloat(item.real_qty2);
					arr[index].real_qty = Api.setTwoFloat(item.real_qty);
					arr[index].return_qty2 = Api.setTwoFloat(item.return_qty2);
					arr[index].Qty = Api.setTwoFloat(item.Qty);
					arr[index].Amount = Api.setTwoFloat(item.Amount);
				});
				return arr;
			},
			lookMore: function(index) {
				this.nowRote = this.nowRote == index ? "-1" : index;
			},
			changeListAl: function() {
				this.isList = !this.isList;
			},
			
			openModel(type,index=0){
				this.AddListens();
			    if(type==0){
					  uni.navigateTo({
					  	url:'./info-vipMessageAdd?type=0&NowSelectUnit='+JSON.stringify(this.orderList[index]) 
					  })
				}else{
					uni.navigateTo({
						url:'./info-vipMessageAdd?type=1'
					})
				}
			}
		},
		data() {
			return {
				showChange:false,
				orderList: [],
				containerHeight: 100,
				wrapperHeight: 600,
				orderListHeight: 100,
				orderLiHeight: 100,
				isList: true,
				startTime: "",
				endTime: "",
				curstomName: "全部客户",
				//订单页标题
				OrderTitle: "会员档案",
				//是否供应商销售汇总
				isSupperPurb: false,
				nowRote: -1,
				//进货/销售数量总计
				inPurSaleQty: 0,
				//进货/销售金额总计
				inPurSaleAmount: 0,
				//退货数量总计
				outPurQty: 0,
				//退货金额总计
				outPurAmount: 0,
				//进货数总计
				inGetQty: 0,
				//退货数总计
				ouGetQty: 0,
				//差异数
				cyQty: 0,
				//差异金额
				cyAmount: 0,
				//td宽度列表
				tdWidth:[125,125,125,125,125,125,125],
				//tb表头
				tdHeaderList:[
				{
					name:"序号"
				},
				{
					name:"编号"
				},{
					name:"姓名"
				},{
					name:"电话"
				},{
					name:"性别"
				},{
					name:"积分"
				},
				{
					name:"余额"
				}
				],
				MemberName:"",
				Phone:"",
				MemberCode:""
			}
		}
	}
</script>

<style lang="scss">
  @import url('../../style/changecolum.scss');
  	/*图标的大小*/
  	$iconWidth:20px;
  	$iconHeight:20px;
  	$iconBackSize:20px;
  	.title-padding {
  		height: 25px;
  		background: $bb-bg-color;
  		box-sizing: content-box;
  	}
  
  	page {
  		width: 100%;
  		height: 100%;
  		padding-bottom: 0px;
  	}
  
  	.wrapper {
  		width: 100%;
  		height: 100%;
  		display: flex;
  		flex-direction: column;
  		overflow: hidden;
  	}
  
  	button::after {
  		border: none;
  		padding: 0px;
  	}
  
  	.headerGd {
  		width: 100%;
  		height: 50px;
  		line-height: 50px;
  		background: $bb-bg-color;
  		display: table;
          
  		.header {
  			position: relative;
  			text-align: center;
  			font-size: 16px;
  			color: #FFF;
  
  			.back {
  				width: $iconWidth;
  				height: $iconHeight;
  				background: url(../../static/back.png) no-repeat;
  				position: absolute;
  				left: 10px;
  				top: 15px;
  				background-size: $iconBackSize;
  			}
  
  			.filter {
  				width: $iconWidth;
  				height: $iconHeight;
  				position: absolute;
  				right: 10px;
  				top: 15px;
  				background: url(../../static/cg/filter.png);
  			}
  		}
  	}
  
  	.container {
  		font-size: 14px;
  		.curstom {
  			width: 100%;
  			height: 50px;
  			line-height: 50px;
  			display: flex;
  			padding-left: 10px;
  			padding-right: 10px;
  			box-sizing: border-box;
  			background: #030ed9;
  			box-sizing: border-box;
  			color: #FFF;
  
  			.curstomName {
  				flex: 1;
  				text-align: center;
  			}
  
  			.filterTime {
  				flex: 1;
  				text-align: center;
  				display: flex;
  				flex-direction: column;
  
  				text {
  					flex: 1;
  					line-height: 50upx;
  					height: 50upx;
  					
  				}
  			}
  			.changeList {
  				width: 30px;
  				height: 30px;
  				background: url(../../static/changeIcon.png) no-repeat;
  				background-size: 100%;
  				margin-top: 30upx;
  			}
  		}
  
  		//表格单据
  		.orderList {
  			width: 100%;
  			overflow: auto;
  			box-sizing: border-box;
  
  			text {
  				float: left;
  				text-align: center;
  				box-sizing: border-box;
  				display: inline-block;
  				height: 40px;
  				line-height: 40px;
  				border-right: 1px solid #ebebeb;
  				white-space:nowrap;
  				text-overflow:ellipsis;
  				overflow:hidden;
  // 				&:nth-child(1) {
  // 					width: 80px;
  // 				}
  // 
  // 				&:nth-child(2) {
  // 					width: 125px;
  // 				}
  // 
  // 				&:nth-child(3) {
  // 					width: 200px;
  // 				}
  // 
  // 				&:nth-child(n+4) {
  // 					width: 125px;
  // 				}
  
  				&:last-child {
  					border: none;
  				}
  			}
  
  			.orderNav {
  				width: 100%;
  				height: 40px;
  				line-height: 40px;
  				border: 1px solid #ebebeb;
  				box-sizing: border-box;
  				overflow: hidden;
  				
  			}
  
  			.orderLi {
  				background: #ebebeb;
  				.orderItem {
  					height: 40px;
  					line-height: 40px;
  					width: 100%;
  					border: 1px solid #ebebeb;
  					box-sizing: border-box;
  					border-bottom: 1px solid #CCCCCC;
  					border-left: 1px solid #CCC;
  					border-right: 1px solid #CCC;
                      overflow:auto;
  					text {
  						border-right: 1px solid #CCC;
  
  						&:last-child {
  							border: none;
  						}
  					}
  				}
  			}
  
  			.allPrice {
  				@extend .orderNav;
  				background: #030ed9;
  				color: #FFF;
  			}
  		}
             .flOptions {
  		width: 100%;
  		height: 100upx;
  		line-height: 100upx;
  		display: flex;
  		flex-direction: row;
  		text-align: center;
  		position: fixed;
  		bottom: 0upx;
  		left: 0upx;
  	    z-index:99999;
  		button {
  			flex: 1;
  			height: 100upx;
  			border-radius: 0upx;
  			background: #031ae6;
  			color: #FFF;
  	
  			&:first-child {
  				border-right: 1px solid #FFF;
  			}
  		}
  	}
  		//列表单据
  		.orderLookAllList {
  			width: 100%;
  			background: #ebebeb;
  			box-sizing: border-box;
  			padding: 30upx;
  			box-sizing: border-box;
  			overflow: auto;
  
  			.orderLookItem {
  				width: 100%;
  				height: 220upx;
  				overflow: hidden;
  				position: relative;
  				border-radius: 20upx;
  				background: #FFF;
  				box-sizing: border-box;
  				padding-left: 30upx;
  				padding-right: 100upx;
  				padding-top: 5upx;
  				padding-bottom: 5upx;
  				margin-bottom: 20upx;
  			}
  			.lookMoreInfo {
  				width: $iconWidth;
  				height: $iconHeight;
  				background: url(../../static/pull.png) no-repeat;
  				position: absolute;
  				bottom: 10upx;
  				right: 10upx;
  				padding: 0upx;
  				background-size: 100% 100%;
  				transition: height 2s;
  			}
  			text {
  				display: block;
  				font-size: 30upx;
  				&:nth-child(1) {
  					position: absolute;
  					top: 10upx;
  					right: 10upx;
  					width: $iconWidth;
  					height: $iconHeight;
  					border-radius: 10upx;
  					text-align: center;
  					display: table;
  					color: #000;
  					line-height: $iconHeight;
  					padding: 5upx;
  				}
  				&:nth-child(n+2) {
  					height: 55upx;
  					line-height: 55upx;
  					display: table;
  				}
  			}
  			.lookMoreClass {
  				display: table;
  
  			}
  			.openAndClose {
  				transform: rotate(180deg);
  			}
  		}
  
  	}
  
</style>
